<template>
  <div>
    <el-dialog
      :visible="addDialog"
      width="50%"
      :before-close="closeDialog"
      top="5vh"
      :close-on-click-modal="false"
    >
      <div class="dialogTitle" slot="title">
        {{ this.form.id ? "编辑特殊作业证" : "新增特殊作业证" }}
      </div>
      <el-form :model="form" label-width="180px">
        <el-form-item label="姓名:">
          <!-- <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入"
          /> -->
          <el-select v-model="form.name" filterable placeholder="请选择">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="照片（人像）:">
          <el-upload
            action=""
            :http-request="UploadImage3"
            :file-list.sync="fileList"
            :limit="1"
            list-type="picture-card"
            :on-exceed="handleExceed"
            :on-change="handleFileChange"
          >
            <i v-if="fileList.length < 1" slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="证书编号:">
          <el-input
            v-model="form.certificateNumber"
            autocomplete="off"
            placeholder="请输入 "
          />
        </el-form-item>
        <!-- <el-form-item label="年龄:">
          <el-input
            v-model="form.age"
            autocomplete="off"
            placeholder="请输入 "
          />
        </el-form-item> -->
        <el-form-item label="性别:">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option
              v-for="item in options1"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="作业票类型:">
          <el-select
            v-model="form.ticketTypeCode"
            placeholder="请选择作业票类型"
          >
            <el-option
              v-for="item in selectList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="电子证照（作业证照片）:">
          <el-upload
            action=""
            :http-request="UploadImage4"
            :file-list.sync="fileList2"
            :limit="1"
            list-type="picture-card"
            :on-exceed="handleExceed2"
            :on-change="handleFileChange2"
          >
            <i
              v-if="fileList2.length < 1"
              slot="default"
              class="el-icon-plus"
            />
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove2(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="证书有效起始日期:">
          <el-date-picker
            v-model="form.validStartDate"
            type="date"
            placeholder="选择开始时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="证书有效截止日期:">
          <el-date-picker
            v-model="form.validEndDate"
            type="date"
            placeholder="选择开截止时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!form.id" class="addBtn" type="primary" @click="submit"
          >确定新增</el-button
        >
        <el-button v-else class="addBtn" type="primary" @click="submit"
          >确定修改</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { uploadApi } from "@/api/login";
import {
  specialWorkAddApi,
  specialWorkUpdateApi,
  userListApi,
} from "@/api/specialWorkTable";
import { workTypeApi } from "@/api/workManagement";

export default {
  name: "addProblem",
  props: {
    addDialog: {
      type: Boolean,
      default: false,
    },
    dialogId: {
      type: String,
      default: null,
    },
  },
  components: {},
  data() {
    return {
      form: {
        name: "",
        certificateNumber: "",
        age: "",
        sex: "",
        validStartDate: "",
        validEndDate: "",
      },
      fileList: [],
      options1: [
        {
          value: 0,
          label: "女",
        },
        {
          value: 1,
          label: "男",
        },
      ],
      uploaderSubmit: [],
      uploaderSubmit2: [],
      fileList2: [],
      selectList: [],
      userList: [],
    };
  },
  created() {
    this.userListApiGet()
  },
  methods: {
    async submit() {
      const ticketTypeName = this.selectList.filter((item) => {
        return item.code == this.form.ticketTypeCode;
      });
      // console.log(ticketTypeName);
      if (this.form.id) {
        const res = await specialWorkUpdateApi({
          id: this.form.id,
          name: this.form.name,
          certificateNumber: this.form.certificateNumber,
          age: this.form.age,
          sex: this.form.sex,
          validStartDate: this.form.validStartDate,
          validEndDate: this.form.validEndDate,

          userImage: this.uploaderSubmit[0].url,
          certificateImage: this.uploaderSubmit2[0].url,

          ticketTypeCode: this.form.ticketTypeCode,
          ticketTypeName: ticketTypeName[0].name,
        });

        if (res.code == 0) {
          this.$message.success("修改成功");
          this.closeDialog();
          this.$parent.specialWorkPage();
        } else {
          this.$message.error("新增失败");
        }
      } else {
        const res = await specialWorkAddApi({
          name: this.form.name,
          certificateNumber: this.form.certificateNumber,
          // age: this.form.age,
          sex: this.form.sex,
          validStartDate: this.form.validStartDate,
          validEndDate: this.form.validEndDate,

          userImage: this.uploaderSubmit[0].url,
          certificateImage: this.uploaderSubmit2[0].url,

          ticketTypeCode: this.form.ticketTypeCode,
          ticketTypeName: ticketTypeName[0].name,
        });

        if (res.code == 0) {
          this.$message.success("新增成功");
          this.closeDialog();
          this.$parent.specialWorkPage();
        } else {
          this.$message.error("新增失败");
        }
      }
    },
    closeDialog() {
      this.form = {};
      this.fileList = [];
      this.fileList2 = [];
      this.uploaderSubmit = [];
      this.uploaderSubmit2 = [];

      this.$emit("update:addDialog", false); // 触发父组件更新
    },

    handleFileChange(file, fileList) {
      this.fileList = fileList; // 手动同步
    },
    handleFileChange2(file, fileList) {
      this.fileList2 = fileList; // 手动同步
    },
    handleRemove(e) {
      this.uploaderSubmit = this.uploaderSubmit.filter((item) => {
        return item.uid !== e.uid;
      });
      this.fileList = this.fileList.filter((item) => {
        return item.uid !== e.uid;
      });
    },
    handleRemove2(e) {
      this.uploaderSubmit2 = this.uploaderSubmit2.filter((item) => {
        return item.uid !== e.uid;
      });
      this.fileList2 = this.fileList2.filter((item) => {
        return item.uid !== e.uid;
      });
    },
    handleExceed() {
      this.$message.warning("最多上传 1 个文件");
    },
    handleExceed2() {
      this.$message.warning("最多上传 1 个文件");
    },
    async UploadImage3(file) {
      this.openLoading();
      const formData = new FormData();
      formData.append("file", file.file);

      const res = await uploadApi(formData);
      if (res.code === 0) {
        this.uploaderSubmit.push({
          url: res.data,
          name: file.file.name,
          uid: file.file.uid,
        });
      } else {
        this.fileList.pop();
      }
      this.openLoading().close();
    },
    async UploadImage4(file) {
      this.openLoading();
      const formData = new FormData();
      formData.append("file", file.file);

      const res = await uploadApi(formData);
      if (res.code === 0) {
        this.uploaderSubmit2.push({
          url: res.data,
          name: file.file.name,
          uid: file.file.uid,
        });
      } else {
        this.fileList2.pop();
      }
      this.openLoading().close();
    },
    async workTypeApiGet() {
      const res = await workTypeApi();
      this.selectList = res.data;
    },
    async userListApiGet() {
      const res = await userListApi({
        name: null,
      });
      this.userList = res.data;
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>

<style scoped lang="scss">
.dialogTitle {
  position: relative;
  padding-left: 10px; /* 调整文本与颜色条之间的间距 */
  font-weight: bold;
}
.dialogTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 2px;
  transform: translateY(-50%);
  width: 4px; /* 颜色条的宽度 */
  height: 14px; /* 颜色条的高度 */
  background-color: #0077ff; /* 颜色条的颜色 */
}
.el-select {
  width: 100%;
}
::v-deep .el-dialog__body {
  padding-right: 50px !important;
}
::v-deep .dialog-footer {
  text-align: center;
  .addBtn {
    background: #0077ff;
    border-radius: 4px 4px 4px 4px;
    border: none;
    color: #fff;
  }
}

::v-deep .el-upload--picture-card {
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
</style>
